<!DOCTYPE html> 
<html> 
	<head>
		<!-- required -->
		<meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1">

		<script type="text/javascript">
			// configure framework using fluidOptions (a global variable) 
			var fluidOptions = {
				// Optional. - Just for better understanding here
				// name of the folder where application core is placed under
				// if this is not defined, it will assumed to be "app", although when using
				// build engine, it is taken care of by build engine as per build-time definition
				appFolder: "app",	
				
				// reconfigure named plugins of the framework
				// provide an alternate implementation for required ones by giving the JS file name for a named plugin, 
				// leave it empty if inbuilt version of the plugin is to be used
				// in case inbuild plugin is not required - use "off" keyword (use with care, framework may stop working)
				namedPlugins: {
					// with the help of fluidOptions, any core plugin can be turned off 
					// or an external version can be configured
					
					// must be defined (if a custom application plugin is to be used)
					app: "%APP%/app.debug.js"
				}
			};
			
			// called when framework is completely loaded and navigaton to a page should happen now. 
			// Note, this is a fall-back method and is called only when framework's default navigation
			// engine is not in use and in that case either application plugin is not in use or does
			// not take care of this by having $f.app.onNavigationASync() function.
			// params:
			//	callback (function): function to call after navigation is done
			// returns (void):			
			function onNavigationASync(callback) {
				// This example requires core or above package to work
				if ($f.info.version.package.isKernel()) {
					$("#body").hide();
					$("body").append("<strong>This example cannot run with '" + $f.info.version.package.type + "' package.</strong>");
					return;
				};
				
				// NOTE: 
				// If you follow the framework approach of application development
				// you don't need to write any code here.
				//
				// This is just to show case that it is possible - just in case.
				//	
				
				// do whatever you want here to show required UI, manipulate DOM or whatever
				// e.g., here I am making "body" div visible
				$("#body").show();
				
				// NOTE: In case of 'kernel' and 'core' packages of framework navigation engine
				// is not baked in and therefore this call is executed - but in other packages
				// where navigation engine is baked in, this code does not execute - but you
				// still see that body is set to visible, this is because at the time when
				// "#body" element is moved to its right place in startup structure, it is 
				// automatically set to be visible (though can be controlled by setting configuration
				// option fluidOptions.isSupressAutoBodyVisible to true.
				
				// once you are done with your logic of showing UI, you MUST CALL
				// given callback to complete frameowrk loading and firing post
				// navigation events
				// IMPORTANT: If this is not done, framework will not be loaded
				// completely and state of application will be unstable
				if (isFunction(callback)) {
					callback();
				};
			};
			
			// on application error
			// this is called if framework catches any unhandled error 
			// and a custom application plugin is not handling it
			// params: 
			//	message (string): error message
			//	url (string): url of the document in which error is
			//	lineNumber (number): line number of the document where error is
			// returns (boolean):		
			//	true: if no error dialog is required
			//	false: if an error dialog is required
			function onApplicationError(message, url, lineNumber) {
				// handle it here
				alert("This unhandled error is handled by global onApplicationError() function.");
				
				// return
				return false;
			};
		</script>
		
		<!-- for DEMO UI use only -->
		<link href="../../res/bootstrap.min.css" rel="stylesheet">
		<link href="../../res/bootstrap-responsive.min.css" rel="stylesheet">
		<link href="../../res/styles.css" rel="stylesheet">
		<!-- -->
		
	</head>
	<body> 
		<!-- required -->
		<applet name="fsa" code="fsa.class" archive="../../fsa.jar" style="position:absolute; left:-1px;" height="1" width="1"></applet> 

		<!-- ideally no user interface will be written in startup html directly
		however, just in case you want to write, put it in a div named "body", this will
		ensure that this UI is moved to a logical place in overall page structure so UI is 
		not distorted drastically -->
		<div id="body" style="display: none;">
		
			<!-- top bar -->
			<div class="navbar">
			  <div class="navbar-inner">
				<div class="container-fluid">
				  <a class="brand">Application - Centralized control.</a>
				  <div class="pull-right">
					<a class="navbar-text noline" href="..\..\basic\application" fluid-noIntercept target="_blank" title="Open source folder"><i class="icon-folder-open"></i> Source</a>
					<a class="navbar-text noline" href="http://docs.fluidjs.vikasburman.com/2013/01/application.html" fluid-noIntercept target="_blank" title="Open example page"><i class="icon-file"></i> Docs</a>
				  </div>
				</div>
			  </div>
			</div>
			<!-- -->

			<div class="container-fluid">
				<div class="row-fluid">

					<!-- side bar -->
					<div class="span3"><div class="well sidebar-nav">
						<!-- sections -->
						<div class="accordion" id="accordion">
						  <!-- showcase -->
						  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec1" fluid-noIntercept>
							<i class="icon-comment"></i> Showcase
						  </a></div><div id="sec1" class="accordion-body collapse in"><div class="accordion-inner">
							<p><i class="icon-cog"></i> This shows how a custom version of <span class="object">$f.app</span> can be loaded.</p>
							<p><i class="icon-cog"></i> This shows how customized app plugin can be a centralized place to organize application wide code.</p>
							<p><i class="icon-cog"></i> It also shows how app plugin can intercept plugin and feature loading.</p>
						  </div></div></div>
						  <!-- -->
						  <!-- observations -->
						  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec2" fluid-noIntercept>
							<i class="icon-eye-open"></i> Observations
						  </a></div><div id="sec2" class="accordion-body collapse"><div class="accordion-inner">
							<p><i class="icon-cog"></i> See the loaded plugins list.</p>
							<p><i class="icon-cog"></i> See the events log.</p>
						  </div></div></div>
						  <!-- -->
						  <!-- Activities -->
						  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec3" fluid-noIntercept>
							<i class="icon-hand-right"></i> Activities
						  </a></div><div id="sec3" class="accordion-body collapse"><div class="accordion-inner">
							<p><i class="icon-cog"></i> Have a look at <span class="file">app-plugin.html</span> and <span class="file">app.debug.js</span> files.</p>
							<p><i class="icon-cog"></i> Click below to optionally load myPlugin2.</p>
							<a href="#" class="btn btn-inverse" onclick="javascript: return $f.myPlugin1.loadPlugin();">$f.myPlugin1.loadPlugin();</a>
							<p><i class="icon-cog"></i> Click below to load myFeature1.</p>
							<a href="#" class="btn btn-inverse" onclick="javascript: return $f.myPlugin1.loadFeature();">$f.myPlugin1.loadFeature();</a>
							<p><i class="icon-cog"></i> Click below to throw an exception.</p>
							<a href="#" class="btn btn-danger" onclick="javascript: return throwError();">Throw an Exception</a>
						  </div></div></div>
						  <!-- -->
						  <!-- Takeaways -->
						  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec4" fluid-noIntercept>
							<i class="icon-shopping-cart"></i> Takeaways
						  </a></div><div id="sec4" class="accordion-body collapse"><div class="accordion-inner">
							<p><i class="icon-cog"></i> <span class="file">{app}.debug.js</span> is just like any other fluid plugin.</p>
							<p><i class="icon-cog"></i> Framework can be configured via <span class="object">fluidOptions</span> global variable.</p>
							<p><i class="icon-cog"></i> Application plugin can control loading of all plugins and features, from the point this itself is loaded.</p>
							<p><i class="icon-cog"></i> In absence of default navigation engine <span class="object">$f.app.onNavigationASync()</span> can support navigation cycle.</p>
						  </div></div></div>
						  <!-- -->
						</div>
						<!-- -->
					</div></div>
					<!-- -->
					
					<!-- right half where the action is -->
					<div class="span9"><div class="row-fluid">
							
						<!-- tabs -->
						<ul class="nav nav-tabs">
							<li id="t1" class="active"><a href="#" onclick="javascript: return showTab('t1', 'message');">Hello, World! (from Application)</a></li>
							<li id="t2"><a href="#" onclick="javascript: return showTab('t2', 'list');">Plugins list</a></li>
							<li id="t3"><a href="#" onclick="javascript: return showTab('t3', 'eventslog');">Events log</a></li>
						</ul>
						<!-- -->
						
						<!-- hello world -->
						<div id="message">
						</div>
						<!-- -->
						
						<!-- events log -->
						<div id="eventslog" style="display: none;">
						</div>						
						<!-- -->
						
						<!-- plugins list -->
						<div id="list" style="display: none;">
						</div>						
						<!-- -->
						
						
					</div></div>
					<!-- -->
					
				</div>	
			</div>
			
		</div>
		
		<!-- refer framework JS (as last item in body) -->
		<script type="text/javascript" src="../../fluid.debug.js"></script> 	
		
		<!-- for DEMO UI use only -->
		<script src="../../res/bootstrap.min.js"></script>
		<script src="../../res/general.js"></script>
		<!-- -->

		<!-- statically loaded plugins (NOTE: this is defined after the framework definition) -->
		<script type="text/javascript" src="./plugins/myPlugin1.debug.js"></script>
	</body> 
</html> 